<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title> 导航 </title>
  <style>
    html {
      font-size: 10px
    }

    @media screen and (min-width:321px) and (max-width:375px) {
      html {
        font-size: 11px
      }
    }

    @media screen and (min-width:376px) and (max-width:414px) {
      html {
        font-size: 12px
      }
    }

    @media screen and (min-width:415px) and (max-width:489px) {
      html {
        font-size: 13px
      }
    }

    @media screen and (min-width:490px) and (max-width:564px) {
      html {
        font-size: 14px
      }
    }

    @media screen and (min-width:565px) and (max-width:639px) {
      html {
        font-size: 15px
      }
    }

    @media screen and (min-width:640px) and (max-width:719px) {
      html {
        font-size: 20px
      }
    }

    @media screen and (min-width:720px) and (max-width:749px) {
      html {
        font-size: 22.5px
      }
    }

    @media screen and (min-width:750px) and (max-width:799px) {
      html {
        font-size: 23.5px
      }
    }

    @media screen and (min-width:800px) {
      html {
        font-size: 25px
      }
    }

  </style>
</head>

<body>
  <div id="app" style="text-align:center;">
     正在搜索位置，请耐心等候
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 
</body>

</html>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        lat: "",
        lng: "",
        shopName: "",
        addr: ""
      };
    },
    created() {},
    mounted() {
      this.queryJsConfig();
    },
    methods: {
      getRequestParameters() {
        let urlParameters = window.location.search;
        //声明并初始化接收请求参数的对象
        var requestParameters = new Object();
        //如果该求青中有请求的参数，则获取请求的参数，否则打印提示此请求没有请求的参数
        if (urlParameters.indexOf('?') != -1) {
          //获取请求参数的字符串
          var parameters = decodeURI(urlParameters.substr(1));
          //将请求的参数以&分割中字符串数组
          var parameterArray = parameters.split('&');
          //循环遍历，将请求的参数封装到请求参数的对象之中
          for (var i = 0; i < parameterArray.length; i++) {
            requestParameters[parameterArray[i].split('=')[0]] = (parameterArray[i].split('=')[1]);
          }
          console.info('theRequest is =====', requestParameters);
        } else {
          console.info('There is no request parameters');
        }
        return requestParameters;
      },
      navagation() {
        let vm = this;
        wx.openLocation({
          latitude: vm.lat, // 纬度，浮点数，范围为90 ~ -90
          longitude: vm.lng, // 经度，浮点数，范围为180 ~ -180。
          name: vm.shopName, // 位置名
          address: vm.addr, // 地址详情说明
          scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
       //   infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
        });
      },
      queryJsConfig() {
        let vm = this;
        const params = {
          url: window.location.href,
        };
         axios.post('http://xf.ctjt.cn:8090/smokev2/api/oauth/getsign', params)
       // axios.post('http://hexiaofang.com:8090/smokev2/api/oauth/getsign', params)
          .then(function (response) {
            var res = response.data;
            if (res.code === 0) {
              const data = res.data;
              wx.config({
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                debug: false,
                // 必填，公众号的唯一标识
                appId: data.appId,
                // 必填，生成签名的时间戳
                timestamp: data.timestamp,
                // 必填，生成签名的随机串
                nonceStr: data.nonceStr,
                // 必填，签名
                signature: data.signature,
                // 必填，需要使用的JS接口列表，所有JS接口列表
                jsApiList: ["openLocation"]
              });
              wx.ready(() => {
                let requestParameters = vm.getRequestParameters();
      vm.lat = parseFloat(requestParameters.lat);
      vm.lng = parseFloat(requestParameters.lng);
      if (vm.lat && vm.lng) {
        vm.shopName = requestParameters.shopName;
        vm.addr = requestParameters.addr;
        setTimeout(function () {
          vm.navagation();
        }, 1000)
      } else {
        alert("无效经纬度");
      }
  });
              wx.error(function (res) {
                alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });


      }
    }
  });

</script>

</script>
